<!--
 * @Description:多物体运动.html
 * @Author: Sun
 * @Date: 2019-07-01 20:05:50
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-06 22:24:16
 -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>多物体运动.html</title>
	<style>
		#div1 {
			width: 100px;
			height: 50px;
			background: red;
			margin: 10px;
		}
	</style>
	<script>
		window.onload = function () {
			var odiv = document.getElementsByTagName('div')

			var timer = null;

			function startmove(obj, itarget) {
				clearInterval(obj.timer)
				obj.timer = setInterval(() => {
					var speed = (itarget - obj.offsetWidth) / 6
					speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
					if (obj.offsetWidth == itarget) {
						clearInterval(obj.timer)
					} else {
						obj.style.width = obj.offsetWidth + speed + 'px'
					}
				}, 30)
			}

			for (let index = 0; index < odiv.length; index++) {
				const element = odiv[index];
				element.timer = null
				element.onmouseover = function () {
					startmove(this, 400)
				}
				element.onmouseout = function () {
					startmove(this, 100)
				}
			}

		}
	</script>
</head>

<body>
	<div id="div1"></div>
	<div id="div1"></div>
	<div id="div1"></div>

</body>

</html>